<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单确认</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="line">
            <img :src="$global.Image.icon_goods_line" />
        </div>
        <div class="order-detail">
            <div class="inform">
                <div class="line-ti">
                    <div>收货信息</div>
                </div>
                <ul class="ul">
                    <li class="li td-fsc a" :class="item.checked?'select':''" v-for="(item, idx) in addressList" :key="idx" @click="_selectAddress(idx)">
                        <div class="li-info-name">{{item.checked?'收货人信息':''}}</div>
                        <img class="icon-checked" :src="item.checked ? $global.Image.icon_checked : $global.Image.icon_checked_grey" />
                        <div class="detail">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</div>
                        <div class="name">({{item.real_name}} 收 {{item.phone}})</div>
                        <!-- <div class="tel red-text">{{item.is_default?'默认地址':''}}</div> -->
                        <div class="td-fbc edit-box">
                            <!-- <img :src="$global.Image.icon_edit" /> -->
                            <span v-if="item.is_default" class="span1">默认</span>
                            <!-- <span class="span2" v-if="item.checked">使用</span> -->
                            <span class="span3" @click.stop="showEditDialog(item.id)">编辑</span>
                        </div>
                    </li>
                    <div class="addAddr" @click="showAddDialog">新增收货地址</div>
                </ul>
            </div>
            <div class="line-ti">
                <div>配送方式</div>
            </div>
            <div class="deli-method">
                <div :class="{this: send_type == 0}" @click="send_type = 0">尽快发货</div>
                <div :class="{this: send_type == 1}" @click="send_type = 1">统一发货</div>
            </div>
            <div style="height:20px"></div>
            <div class="line-ti">
                <div>订单信息</div>
            </div>
            <div class="bill" style="height:auto;margin-bottom: 40px;">
                <div class="bill-itm">
                    <div class="bill-left">订单名称：</div>
                    <div class="bill-right">
                        <el-input v-model="orderName" placeholder="请输入订单名称" style="width:420px;"></el-input>
                    </div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">订单编号：</div>
                    <div class="bill-right">{{orderDetail.order_id}}</div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">采购商品件数：</div>
                    <div class="bill-right">{{orderDetail.total_num}}</div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">采购单总金额：</div>
                    <div class="bill-right">{{orderDetail.total_price}}</div>
                </div>
            </div>
            <div class="line-ti">
                <div>商品信息</div>
            </div>
            <div class="cart-top td-fss">
                <div class="cart-td1">商品</div>
                <div class="cart-td2">规格</div>
                <div class="cart-td2">单价</div>
                <div class="cart-td3">数量</div>
                <div class="cart-td4">小计</div>
                <div class="cart-td4">操作</div>
            </div>
            <ul class="cart-list">
                <li class="td-fss" v-for="(item, index) in goodsList" :key="index">
                    <div class="cart-td1 td-fsc">
                        <img class="goods-img" :src=" item.productInfo.attrInfo ? item.productInfo.attrInfo.image : item.productInfo.image " @click="$router.push({ path: '/detail/' + item.product_id })" />
                        <div class="td-f1 goods-info" @click="$router.push({ path: '/detail/' + item.product_id })">
                            <div class="name">{{ item.productInfo.store_name }}</div>
                            <div class="price">￥{{ item.truePrice }}</div>
                        </div>
                    </div>
                    <div class="cart-td2 td-fcc td-fsc attrs-info" v-if="item.productInfo.attrInfo">
                        <span class="goods-attr attr-text td-f1">{{ item.productInfo.attrInfo.suk }}</span>
                        <span class="edit-btn1" @click="formatClick(item, index)" v-if="item.productInfo.attrInfo.suk != '默认'">修改</span>
                    </div>
                    <div class="cart-td2 td-fbc" v-else>
                        <span class="goods-attr">无</span>
                    </div>
                    <div class="cart-td2 td-fbc" style="text-align:center">
                        <div class="goods-attr" style="width:100%;color:#333">{{item.productInfo.price}}</div>
                    </div>
                    <div class="cart-td3 td-fcc">
                        <el-input-number v-model="item.cart_num" @change="changeGoodsNum(item.id, item.cart_num)" :min="1" :max="item.trueStock" size="small" label="描述文字"></el-input-number>
                    </div>
                    <div class="cart-td4 td-fcc">
                        <span class="amount">¥{{ (item.truePrice * item.cart_num).toFixed(2) }}</span>
                    </div>
                    <div class="cart-td4 td-fcc">
                        <span class="edit-btn1" style="cursor: pointer;" @click="removeDel(item.id,index)">移除</span>
                    </div>
                </li>
            </ul>
            <div class="inform-order">
                <div>备注</div>
                <textarea placeholder="请输入" style="resize:none" v-model="mark"></textarea>
            </div>
            <div style="height:20px"></div>
            <div class="line-ti">
                <div>审核人</div>
            </div>
            <div class="order-detail">
                <div class="approve">
                    <ul class="ul">
                        <li class="li td-fsc a" :class="item.checked?'select':''" v-for="(item, idx) in approveList" :key="idx" @click="_selectApprove(idx)">
                            <div class="li-info-name">{{item.checked?'审核人选择':''}}</div>
                            <div style="display:flex;flex:1">

                                <img class="icon-checked" :src="
                item.checked
                  ? $global.Image.icon_checked
                  : $global.Image.icon_checked_grey" />

                                <div class="detail" style="width:120px">{{item.username}}</div>
                                <div class="name"> {{item.phone}}</div>
                            </div>
                            <div class="td-fbc edit-box">
                                <!-- <img :src="$global.Image.icon_edit" /> -->
                                <span v-if="item.is_default" class="span1">默认</span>
                                <span v-if="!item.is_default" class="span3" @click.stop="showAppEditDialog(item.id)">编辑</span>
                            </div>
                        </li>
                        <div class="addAddr" @click="showAppDialog">新增审批人</div>
                    </ul>
                </div>
            </div>
            <div class="line-ti" v-if="false">
                <div>开票信息</div>
            </div>
            <div class="bill" v-if="false">
                <div class="bill-itm">
                    <div class="bill-left">公司名称：</div>
                    <div class="bill-right">青岛投道网络科技发展有限公司</div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">公司税号：</div>
                    <div class="bill-right">321312348475638483</div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">公司地址：</div>
                    <div class="bill-right">山东省青岛市黄岛区长江路街道峨眉山路396号青岛光谷软件园27号楼501室</div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">公司开户行及账号：</div>
                    <div class="bill-right">青岛银行 / 2736482472824927427</div>
                </div>
                <div class="bill-itm">
                    <div class="bill-left">收票地址：</div>
                    <div class="bill-right">
                        <el-input v-model="addressForm.area" style="width: 420px;cursor: pointer;" placeholder="请选择省市区" readonly></el-input>
                        <el-cascader ref="cascaderAddr" v-model="addressVal" :options="district" :props="propsCascader" @change="_addressHandleChange" filterable :separator="separator"></el-cascader>
                    </div>

                </div>
                <div class="bill-itm">
                    <div class="bill-left">详细地址：</div>
                    <el-input v-model="input" style="width: 420px;" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="pay">
                <div class="del" @click="confirmDelOrder">删除清单</div>
                <div @click="submitOrderEdit">确认并提交审批</div>
            </div>

        </div>
        <v-format ref="format"></v-format>
        <v-addressDialog ref="addressDialog"></v-addressDialog>
        <v-approveDialog ref="approveDialog"></v-approveDialog>
        <v-couponDialog ref="couponDialog" :price="orderDetail.total_price" :cartid="cartId" @checked="changeCoupon"></v-couponDialog>
        <v-payOrder ref="payOrder" :info="infoDetail"></v-payOrder>
    </div>
</template>

<script>
import ApproveDialog from "@components/ApproveDialog";
import AddressDialog from "@components/AddressDialog";
import CouponDialog from "@components/CouponDialog";
import format from "@components/storeView/format";
import payOrder from "@components/storeView/payOrder";

import {
    postOrderConfirm,
    postOrderComputed,
    createOrder,
    orderDetail,
    updateOrder,
    delOrder,
    findMonth,
} from "@api/order";
import {
    getUser,
    getAddressList,
    getAddress,
    postAddress,
    getApproveList,
} from "@api/user";
import { changeCartNum, postCartDel } from "@api/store";
import { getCity } from "@api/public";
import { mapGetters } from "vuex";
import { checkNumber } from "@/utils";

export default {
    components: {
        "v-format": format,
        "v-approveDialog": ApproveDialog,
        "v-couponDialog": CouponDialog,
        "v-addressDialog": AddressDialog,
        "v-payOrder": payOrder,
    },
    data() {
        return {
            cartId: "",
            goodsList: [],
            addressList: [],
            addressInfo: {},
            orderDetail: {},
            separator: "",
            showMoreAddress: false,
            shipping_type: 1,
            usableCoupon: {},
            useIntegral: false,
            addressVal: [],
            integralVal: "",
            district: [],
            orderPrice: {
                pay_price: "计算中",
            },
            userInfo: {},
            debounce: "",
            payType: "weixin",
            payArr: [
                {
                    id: 1,
                    icon: "icon_pay_weixin",
                    name: "微信支付",
                    value: "weixin",
                },
                {
                    id: 2,
                    icon: "icon_pay_alipay",
                    name: "支付宝支付",
                    value: "zhifubao",
                },
                // { id: 3, icon: "icon_pay_yue", name: "余额支付", value: "yue" }
            ],
            contacts: "",
            contactsTel: "",
            pinkId: 0,
            // 地址-省市区
            propsCascader: {
                expandTrigger: "hover",
                label: "n",
                value: "v",
                children: "c",
            },
            from: "frompc",
            addressForm: {
                area: "",
            },
            address: {
                city: "",
                city_id: "",
                district: "",
                province: "",
            },
            // order edit
            send_type: 0,
            orderName: "",
            mark: "",
            approveInfo: {},
            infoDetail: {},
        };
    },
    watch: {
        integralVal(val) {
            this.debounce && clearInterval(this.debounce);
            this.debounce = setTimeout(() => {
                if (!checkNumber(val)) {
                    this.$dialog.error("输入金额格式不正确");
                } else if (val > parseFloat(this.userInfo.integral)) {
                    this.$dialog.error("积分不足");
                    this.integralVal = this.userInfo.integral;
                } else {
                    this.changeIntegral();
                }
            }, 500);
        },
        useIntegral() {
            this.changeIntegral();
        },
    },
    created() {},
    mounted() {
        if (this.$route.params.id !== undefined) {
            this.cartId = this.$route.params.id;
        }
        this.getOrderDetail();
        this.getAddress();
        this.getUserInfo();
        this.getCityList();
        this.getApprove();
    },
    methods: {
        removeDel(id,index) {
            console.log(id);
            let that = this,
                ids = [];
                if(that.goodsList.length == 1){
                    this.$dialog.toast({ mes: "不能删除最后一个商品" });
                    return 
                }
            ids.push(id);
            that.$confirm("确定要移除该商品吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    postCartDel(ids).then(function (res) {
                        if (res.status == 200) {
                           that.$dialog.toast({mes: "删除成功" });
                            that.goodsList.splice(index,1)
                        } else {
                                 that.$dialog.toast({mes: res.msg });
                        }
                    });
                })
                .catch(() => {});
        },
        // 省市区格式化
        _addressHandleChange() {
            let val = this.$refs["cascaderAddr"].getCheckedNodes()[0].pathNodes;
            this.address.city = val[1].label;
            this.address.city_id = val[1].value;
            this.address.district = val[2].label;
            this.address.province = val[0].label;
            this.addressForm.area =
                val[0].label + "" + val[1].label + "" + val[2].label;
        },
        // 获取省市区
        getCityList() {
            let that = this;
            getCity()
                .then((res) => {
                    that.district = res.data;
                })
                .catch((err) => {
                    that.$dialog.error(err.msg);
                });
        },
        // 获取订单详情
        getOrderDetail() {
            orderDetail(this.cartId)
                .then((res) => {
                    this.orderDetail = res.data;
                    this.orderGroupInfo = res.data;
                    this.goodsList = res.data.cartInfo;
                    this.send_type = res.data.send_type;
                    this.orderName = res.data.order_name;
                    this.remark = res.data.remark;
                    if (res.data.usableCoupon) {
                        this.usableCoupon = res.data.usableCoupon;
                    } else {
                        this.usableCoupon = {
                            coupon_title: "不使用优惠券",
                            id: 0,
                        };
                    }
                    // this.computedPrice();
                })
                .catch(() => {
                    this.$dialog.toast({
                        mes: "加载订单数据失败",
                        timeout: 1500,
                        icon: "error",
                        callback: () => {
                            this.$router.go(-1);
                        },
                    });
                });
        },
        getUserInfo() {
            getUser()
                .then((res) => {
                    this.userInfo = res.data;
                })
                .catch(() => {});
        },
        getAddress() {
            getAddressList().then((res) => {
                let addressList = res.data;
                addressList.map((item) => {
                    if (item.is_default) {
                        item.checked = true;
                        this.addressInfo = item;
                    } else {
                        item.checked = false;
                    }
                });
                this.$set(this, "addressList", addressList);
            });
        },
        _selectAddress(index) {
            this.addressList.map((item) => {
                item.checked = false;
            });
            this.addressList[index].checked = true;
            this.addressInfo = this.addressList[index];
            this.$forceUpdate();
        },
        _seeMore() {
            this.showMoreAddress = !this.showMoreAddress;
        },
        /**
         * 新增地址
         */
        showAddDialog() {
            this.$refs["addressDialog"].showAddDialog(() => {
                this.getAddress();
            });
        },
        /**
         * 编辑地址
         */
        showEditDialog(id) {
            if (!id) return false;
            this.$refs["addressDialog"].showEditDialog(id, () => {
                this.getAddress();
            });
        },
        // 修改商品属性
        formatClick(item, index) {
            if (item.productInfo.attrInfo.suk == "默认") {
                return this.$dialog.toast({ mes: "此商品无属性" });
            }
            this.$refs.format.show(item, (res) => {
                this.getCartGoods(res.cartId, index);
            });
        },
        // 获取购物车商品详情
        getCartGoods(cartId, index) {
            postOrderConfirm(cartId)
                .then((res) => {
                    let goodsList = res.data.cartInfo;
                    console.log("new-goods", goodsList);
                    this.$set(this.goodsList, index, goodsList[0]);
                })
                .catch(() => {
                    this.$dialog.toast({
                        mes: res.msg,
                        timeout: 1500,
                        icon: "error",
                    });
                });
        },
        /**
         * 优惠券
         */
        changeCoupon(coupon) {
            if (!coupon) {
                this.usableCoupon = { coupon_title: "不使用优惠券", id: 0 };
            } else {
                this.usableCoupon = coupon;
            }
            this.computedPrice();
        },
        couponTap() {
            this.$refs["couponDialog"].open();
        },
        changeCoupon(coupon) {
            if (!coupon) {
                this.usableCoupon = { coupon_title: "不使用优惠券", id: 0 };
            } else {
                this.usableCoupon = coupon;
            }
            this.computedPrice();
        },
        /**
         * 积分
         */
        changeIntegral() {
            this.computedPrice();
        },
        /**
         * 支付方式
         */
        changePayType(item) {
            if (
                item.value == "yue" &&
                parseFloat(this.orderDetail.pay_price) >
                    parseFloat(this.userInfo.now_money)
            ) {
                this.$dialog.alert({
                    mes: "余额不足，请选择其他支付方式！",
                });
                return;
            }
            this.payType = item.value;
            this.computedPrice();
        },
        /**
         * 计算价格
         */
        computedPrice() {
            postOrderComputed(this.orderGroupInfo.orderKey, {
                addressId: this.addressInfo.id,
                useIntegral: this.useIntegral ? 1 : 0,
                couponId: this.usableCoupon.id || 0,
                shipping_type: this.shipping_type,
                payType: this.payType,
            })
                .then((res) => {
                    const data = res.data;
                    if (data.status === "EXTEND_ORDER") {
                        this.$router.replace({
                            path: "/order/detail/" + data.result.orderId,
                        });
                    } else {
                        this.orderPrice = data.result;
                    }
                })
                .catch((res) => {
                    this.$dialog.error(res.msg);
                });
        },
        // 修改商品数量
        changeGoodsNum(cart_id, num) {
            changeCartNum(cart_id, num)
                .then((res) => {
                    if (res.status !== 200) {
                        this.$dialog.toast({
                            mes: res.msg,
                        });
                    }
                })
                .catch((err) => {
                    this.$dialog.error(err.msg || "操作失败，请稍后重试！");
                });
        },
        // 获取审核人列表
        getApprove() {
            getApproveList().then((res) => {
                let approveList = res.data;
                approveList.forEach((item) => {
                    if (item.is_default) {
                        item.checked = true;
                        this.approveInfo = item;
                    } else {
                        item.checked = false;
                    }
                });
                this.approveList = approveList;
            });
        },
        // 选择审核人
        _selectApprove(index) {
            this.approveList.map((item) => {
                item.checked = false;
            });
            this.approveList[index].checked = true;
            this.approveInfo = this.approveList[index];
            this.$forceUpdate();
        },
        /**
         * 新增审批人
         */
        showAppDialog() {
            this.$refs["approveDialog"].showAppDialog(() => {
                this.getApprove();
            });
        },
        /**
         * 新增审批人
         */
        showAppEditDialog(id) {
            this.$refs["approveDialog"].showEditDialog(id, () => {
                this.getApprove();
            });
        },
        // 订单编辑保存
        submitOrderEdit() {
            let that = this;
            let { orderName, send_type, remark } = this;
            if (!this.addressInfo.id)
                return this.$dialog.toast({ mes: "请选择收货地址" });
            if (!orderName)
                return this.$dialog.toast({ mes: "请输入订单名称" });
            if (!this.approveInfo.id)
                return this.$dialog.toast({ mes: "请选择审批人" });
            let cartId = [];
            this.goodsList.forEach((item) => {
                cartId.push(item.id);
            });
            let params = {
                id: this.orderDetail.id,
                order_name: orderName,
                addressId: this.addressInfo.id,
                send_type: send_type,
                cartId: cartId.join(","),
                approver_uid: this.approveInfo.uid,
                mark: remark,
                edit_type: 2,
            };
            updateOrder(params)
                .then((res) => {
                    if (res.status != 200) {
                        that.$dialog.toast({ mes: res.msg });
                        return;
                    }
                    if (res.data.pay == 1) {
                        let data = this.orderDetail;
                        findMonth({ uni: data.order_id })
                            .then((result) => {
                                console.log("result", result);
                                this.infoDetail = {
                                    uni: data.order_id,
                                    time:
                                        data.add_time_y + " " + data.add_time_h,
                                    price: data.total_price,
                                    name: data.order_name,
                                    num: data.total_num,
                                    invoice_status: result.data.month_balance,
                                };
                                console.log("this.infoDetail", this.infoDetail);
                                this.$refs.payOrder.showDialog = true;
                            })
                            .catch((err) => {
                                this.$message(err);
                            });
                    } else {
                        that.$dialog.toast({ mes: res.msg });
                        that.$router.go(-1);
                    }
                })
                .catch((err) => {
                    this.$dialog.error(err.msg);
                });
        },
        // 删除清单
        confirmDelOrder() {
            let that = this;
            this.$dialog.confirm({
                title: "温馨提示",
                mes: `确认是否删除清单？`,
                opts: (res) => {
                    that.submitDelOrder();
                },
            });
        },
        submitDelOrder() {
            let that = this;
            let uni = that.orderDetail.order_id;
            delOrder(uni)
                .then((res) => {
                    if (res.status != 200) {
                        that.$dialog.toast({ mes: "删除成功" });
                        return;
                    }
                    that.$dialog.toast({ mes: res.msg });
                    that.$router.go(-1);
                })
                .catch((err) => {
                    that.$dialog.error(err.msg);
                });
        },
    },
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.order-detail {
    width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 60px;
    .line-ti {
        width: 100%;
        border-bottom: 1px solid #dbdbdb;
        > div {
            color: #da213d;
            font-size: 18px;
            // border-bottom: 3px solid $color;
            // width: 112px;
            line-height: 36px;
            font-weight: bold;
            position: relative;
            &::before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: "";
                width: 72px;
                height: 3px;
                background: #da213d;
            }
        }
    }
    .detail-top {
        background: #f3f3f3;
        margin: 12px 0 24px 0;
        ul {
            display: flex;
            height: 46px;
            width: 100%;
            align-items: center;
            li {
                list-style-type: none;
                font-size: 14px;
                color: #999999;
                width: 240px;
                text-align: center;
            }
            > li:nth-of-type(1) {
                width: 480px;
                padding-left: 79px;
                text-align: left;
                display: block;
            }
            > li:nth-of-type(2) {
                width: 240px;
            }
            > li:nth-of-type(4) {
                width: 240px;
            }
        }
    }
    .details-in {
        width: 100%;
        height: 149px;
        border: 1px solid #dbdbdb;
        display: flex;
        align-items: center;
        > div {
            height: 149px;
        }
        > div:nth-of-type(1) {
            width: 480px;
            display: flex;
            height: 149px;
            align-items: center;
            input {
                margin: 0 16px 0 12px;
            }
            img {
                width: 100px;
                height: 100px;
            }
            > div {
                margin-left: 16px;
                > div:nth-of-type(1) {
                    color: #333333;
                    font-size: 14px;
                }
                > div:nth-of-type(2) {
                    font-size: 13px;
                    margin-top: 18px;
                }
            }
        }
        > div:nth-of-type(2) {
            width: 240px;
            font-size: 14px;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 79px;
        }
        > div:nth-of-type(3) {
            width: 240px;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            cursor: pointer;
            > div:nth-of-type(1) {
                background: #f3f3f3;
                width: 32px;
                height: 32px;
                font-size: 24px;
                color: #666666;
                border: 1px solid #f3f3f3;
            }
            > div:nth-of-type(2) {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 19px;
                border: 1px solid rgba(203, 203, 203, 1);
            }
            > div:nth-of-type(3) {
                background: #f3f3f3;
                width: 32px;
                height: 32px;
                font-size: 24px;
                color: #666666;
                border: 1px solid #f3f3f3;
            }
        }
        > div:nth-of-type(4) {
            width: 240px;
            font-size: 16px;
            color: $color;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .approve {
        margin-top: 40px;
        ul {
            width: 100%;
            // border: 1px solid #dbdbdb;
            min-height: 240px;
            margin-bottom: 40px;
            .addAddr {
                width: 110px;
                height: 34px;
                background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
                border-radius: 5px;
                font-size: 14px;
                text-align: center;
                color: #ffffff;
                line-height: 34px;
                margin-left: 30px;
                margin-top: 30px;
            }
            li {
                width: 620px;
                height: 46px;
                margin-top: 20px;
                font-size: 16px;
                border: 1px solid #eaa090;
                border-radius: 5px;
                color: #333;
                .li-info-name {
                    margin: 0 55px 0 30px;
                    font-size: 18px;
                    width: 90px;
                    font-weight: bold;
                    color: #da213d;
                    line-height: 46px;
                }
                div {
                    margin-left: 20px;
                    &:nth-of-type(1) {
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                }
                img {
                    display: block;
                    width: 20px;
                    height: 20px;
                }
                .edit-box {
                    // display: none;
                    justify-content: flex-end;
                    flex: 1;
                    // margin-right: 8px;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                    }
                    .span1 {
                        width: 40px;
                        height: 20px;
                        background: linear-gradient(
                            143deg,
                            #da213d 23%,
                            #da213d 90%
                        );
                        border-radius: 2px;
                        line-height: 20px;
                        font-size: 18px;
                        font-weight: bold;
                        margin-right: 30px;
                        font-size: 13px;
                        text-align: center;
                        color: #ffffff;
                    }
                    .span2 {
                        font-size: 18px;
                        font-weight: bold;
                        color: #3ca9d7;
                        margin-right: 30px;
                    }
                    .span3 {
                        font-size: 14px;
                        color: #014a97;
                        margin-right: 35px;
                        position: relative;
                        &::before {
                            position: absolute;
                            left: -35px;
                            top: 0;
                            bottom: 0;
                            margin: auto 0;
                            width: 1px;
                            height: 20px;
                            background: #eaa090;
                            content: "";
                        }
                    }
                }
            }
            li:hover .edit-box {
                display: flex;
            }
            li.select {
                color: #333333;
                font-weight: bold;
                background: #fbf7f7;
                border: 1px solid #eaa090;
            }
        }
    }
    .inform {
        ul {
            border: 1px solid #dbdbdb;
            min-height: 240px;
            margin-bottom: 20px;
            padding: 20px;
            .addAddr {
                width: 110px;
                height: 34px;
                background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
                border-radius: 5px;
                font-size: 14px;
                text-align: center;
                color: #ffffff;
                line-height: 34px;
                margin-top: 30px;
            }
            li {
                height: 46px;
                font-size: 16px;
                border: 1px solid #ffffff;
                color: #333;
                .li-info-name {
                    margin: 0 55px 0 30px;
                    font-size: 18px;
                    width: 90px;
                    font-weight: bold;
                    color: #da213d;
                    line-height: 46px;
                }
                div {
                    margin-left: 20px;
                }
                img {
                    display: block;
                    width: 20px;
                    height: 20px;
                }
                .red-text {
                    font-size: 18px;
                    font-weight: bold;
                    color: #fa321b;
                }
                .edit-box {
                    // display: none;
                    justify-content: flex-end;
                    flex: 1;
                    margin-right: 8px;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                    }
                    .span1 {
                        font-size: 18px;
                        font-weight: bold;
                        color: #fa321b;
                        margin-right: 30px;
                    }
                    .span2 {
                        font-size: 18px;
                        font-weight: bold;
                        color: #3ca9d7;
                        margin-right: 30px;
                    }
                    .span3 {
                        font-size: 14px;
                        color: #014a97;
                        margin-right: 30px;
                    }
                }
            }
            li:hover .edit-box {
                display: flex;
            }
            li.select {
                color: #333333;
                font-weight: bold;
                background: #fbf7f7;
                border: 1px solid #eaa090;
            }
        }
        input {
            margin-left: 10px;
        }
        > div:nth-of-type(1) {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
            margin: 40px 0 32px 0;
        }
        > div:nth-of-type(2) {
            display: flex;
            align-items: center;
            font-size: 18px;
            > div:nth-of-type(1) {
                padding: 0 20px 0 32px;
            }
            > div:nth-of-type(2) {
                padding-right: 49px;
            }
            > div:nth-of-type(3) {
                color: #666666;
                font-size: 14px;
            }
        }
        > div:nth-of-type(3) {
            margin-top: 22px;
            font-size: 16px;
            color: #666666;
        }
    }
    .line {
        width: 100%;
        border: 1px dashed #c1c1c1;
        margin: 22px 0 29px 0;
    }
    .bill {
        margin-top: 30px;
        width: 1199px;
        height: 313px;
        border: 1px solid #eaa090;
        padding: 10px 0;
        box-sizing: border-box;
        .bill-itm {
            padding: 10px 0;
            display: flex;
            align-items: center;
            .bill-left {
                width: 150px;
                font-size: 14px;
                text-align: right;
                color: #333333;
            }
            .bill-right {
                position: relative;
                font-size: 14px;
                color: #333333;
            }
        }
    }
    .inform-cop {
        .coupon-checked {
            padding-top: 20px;
            span {
                height: 30px;
                padding: 0 20px;
                border-top: 1px solid #df3033;
                border-bottom: 1px solid #df3033;
                background: #ffdedf;
                font-size: 14px;
                color: #333;
                position: relative;
                s,
                b {
                    position: absolute;
                    top: -1px;
                    bottom: -1px;
                    display: block;
                    width: 2px;
                    overflow: hidden;
                    background: url("../../assets/img/bg-coupon-lr.gif")
                        no-repeat;
                    background-size: 4px 100%;
                }
                s {
                    left: 0;
                    background-position: -2px 0;
                }
                b {
                    right: -2px;
                }
            }
        }
        .tit {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
        }
        .btn {
            margin-top: 10px;
            font-size: 14px;
            color: #666666;
        }
    }
    .inform-int {
        .tit {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
        }
        .check {
            margin-top: 16px;
            img {
                display: block;
                width: 16px;
                height: 16px;
            }
            .el-checkbox__input {
                display: none;
            }
            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #da213d;
            }
            .user-num {
                padding-left: 40px;
                color: #014a97;
                font-size: 14px;
                b {
                    font-size: 16px;
                }
            }
        }
        .input {
            margin-top: 16px;
            display: flex;
            height: 40px;
            align-items: center;
            input {
                width: 324px;
                height: 40px;
                border-radius: 2px;
                background-color: rgba(248, 248, 248, 1);
                padding-left: 10px;
            }
            ::placeholder {
                color: #999999;
            }
        }
    }
    .inform-order {
        > div:nth-of-type(1) {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
        }
        textarea {
            width: 100%;
            height: 112px;
            background-color: rgba(248, 248, 248, 1);
            margin-top: 25px;
            border: none;
            padding: 15px 0 0 20px;
            box-sizing: border-box;
        }
        ::placeholder {
            color: #999999;
            font-size: 14px;
        }
    }
    .money {
        width: 100%;
        text-align: right;
        margin: 60px 0 32px 0;
        .top {
            width: 100%;
            display: flex;
            height: 24px;
            align-items: center;
            justify-content: flex-end;
            > div:nth-child(1) {
                color: #666666;
                font-size: 18px;
            }
            > div:nth-child(2) {
                padding-left: 33px;
                font-size: 18px;
                color: #333333;
                margin-right: 60px;
            }
        }
        .bot {
            display: flex;
            height: 24px;
            align-items: center;
            margin-top: 32px;
            justify-content: flex-end;
            margin-right: 60px;
            > div:nth-child(1) {
                color: #333333;
                font-size: 18px;
            }
            > div:nth-child(2) {
                padding-left: 33px;
                font-size: 18px;
                color: #333333;
                font-weight: 600;
            }
        }
    }
    .pay-money {
        width: 100%;
        height: 63px;
        background-color: rgba(243, 243, 243, 1);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        > div:nth-child(1) {
            font-size: 16px;
            color: #666666;
        }
        > div:nth-child(2) {
            font-weight: bold;
            font-size: 24px;
            color: $color;
            margin-left: 33px;
            padding-right: 46px;
        }
    }
    .pay {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .del {
            width: 230px;
            height: 50px;
            border: 1px solid #da213d;
            border-radius: 5px;
            background: #fff;
            color: #da213d;
            margin-right: 60px;
        }

        > div {
            width: 234px;
            height: 57px;
            line-height: 57px;
            text-align: center;
            border-radius: 2px;
            background-color: $color;
            color: #ffffff;
            font-size: 18px;
            border-radius: 5px;
            font-weight: 600;
            margin-top: 24px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            line-height: 57px;
        }
    }
}

input[type="checkBox"] {
    /*去除浏览器默认样式*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*自定义样式*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    border: 1px solid $color;
    outline: none;
    cursor: pointer;
}

input[type="checkBox"]:after {
    content: "√";
    position: absolute;
    padding-top: 1px;
    padding-left: 3px;
    font-weight: bolder;
    font-size: 15px;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: $color;
    color: #014a97;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all ease-in-out 300ms;
    -moz-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

input[type="checkBox"]:checked:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

input,
textarea {
    outline: none;
    border: none;
}

.cart-top {
    height: 46px;
    padding: 0 20px;
    margin-top: 20px;
    height: 46px;
    background: #fbf7f7;
    border: 1px solid #eaa090;
    div {
        height: 46px;
        font-size: 14px;
        font-weight: bold;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cart-td1 {
        flex: 1;
    }
    .cart-td2 {
        width: 160px;
    }
    .cart-td3 {
        width: 260px;
    }
    .cart-td4 {
        width: 100px;
    }
}

.cart-list {
    margin-top: 24px;
    li {
        border: solid #dbdbdb 1px;
        padding: 0 20px;
        height: 150px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .cart-td1 {
            flex: 1;
        }
        .cart-td2 {
            width: 160px;
        }
        .attrs-info {
            width: 139px;
            border-radius: 8px;
            .edit-btn1 {
                margin-left: 10px;
                font-size: 14px;
                color: #3ca9d7;
                display: block;
                width: 40px;
                flex-shrink: 0;
            }
        }
        .cart-td3 {
            width: 260px;
        }
        .cart-td4 {
            width: 100px;
            .edit-btn1 {
                margin-left: 10px;
                font-size: 14px;
                color: #3ca9d7;
                display: block;
                width: 40px;
                flex-shrink: 0;
            }
        }
        .icon-checked {
            height: 20px;
            width: 20px;
            object-fit: contain;
        }
        .goods-img {
            display: block;
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-left: 20px;
        }
        .goods-info {
            height: 100px;
            margin-left: 20px;
            padding-right: 30px;
        }
        .name {
            font-size: 16px;
            line-height: 1.6;
            font-weight: bold;
            color: #333333;
            padding-top: 10px;
        }
        .price {
            display: none;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
        }
        .goods-attr {
            font-size: 14px;
            color: #333;
            font-weight: bold;
            word-break: break-all;
            .attr-text {
                text-align: justify;
            }
        }
        .edit-btn {
            width: 48px;
            height: 24px;
            border-radius: 2px;
            font-size: 14px;
            background-color: #da213d;
            color: #014a97;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .amount {
            font-size: 16px;
            font-weight: 700;
            color: #da213d;
        }
    }
}
.show-more {
    margin-top: 20px;
    span {
        font-size: 14px;
    }
    b {
        display: block;
        width: 10px;
        height: 9px;
        background: url("../../assets/img/icon_addr.png") no-repeat 0 0;
        margin-left: 5px;
    }
    b.on {
        background-position: 0 -9px;
    }
    .add-btn {
        color: #da213d;
        margin-left: 20px;
    }
}
.pay-box {
    padding-top: 20px;
    .label {
        min-width: 120px;
        padding: 0 20px;
        height: 46px;
        margin-right: 20px;
        border: solid #dbdbdb 1px;
        border-radius: 2px;
        background-color: #fff;
        cursor: pointer;
        img {
            display: block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        span {
            font-size: 16px;
            color: #666;
        }
        .yue-num {
            font-size: 13px;
            padding-top: 5px;
            padding-left: 5px;
        }
    }
    .label:hover {
        border-color: $color;
    }
    .active {
        border-color: $color;
        position: relative;
    }
    .active:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 18px;
        height: 18px;
        background: url("../../assets/pay/icon_selected.png") right bottom;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
.line {
    width: 1200px;
    margin: 0 auto 30px;
    img {
        display: block;
        width: 100%;
    }
}
.deli-method {
    display: flex;
    margin-top: 30px;
    margin-bottom: 40px;
    div {
        width: 190px;
        height: 60px;
        border: 1px solid #eaa090;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #333333;
        line-height: 60px;
        margin-right: 50px;
        cursor: pointer;
    }
    .this {
        width: 190px;
        height: 60px;
        background: #fbf7f7;
        border: 1px solid #eaa090;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #da213d;
        line-height: 60px;
    }
}
.el-cascader {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
}
</style>
